<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="list in lists" :key="list.path" :to="list.path">{{list.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<!--面包屑-->
<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";
import { ref, watchEffect} from "vue";
const route = useRoute();

const lists = ref([]);


watchEffect( () => {
    lists.value = route.matched;
    /**
     * 解决在首页面包屑导航出现两个首页
     */
    if(lists.value.length && lists.value[1].name === 'home'){
        lists.value = [{path:'/index',name:'index',meta:{title:'首页'}}]
    }
})

</script>

<style scoped>


</style>